<template>
    <div class="profile-container">
        <!-- 个人中心卡片 -->
        <el-card class="profile-card">
            <div slot="header" class="clearfix">
                <i class="el-icon-s-home" style="font-size: 40px"></i><span class="card-title">个人中心</span>
            </div>
            <el-row>
                <el-col :span="24">
                    <el-form :model="formated" label-width="120px">
                        <el-form-item label="ID">
                            <el-input v-model="formated.id" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="用户名">
                            <el-input v-model="formated.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱">
                            <el-input v-model="formated.email" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-input v-model="formated.sex" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="年龄">
                            <el-input v-model="formated.age" disabled></el-input>
                        </el-form-item>


                        <el-form-item label="账号有效">
                            <el-switch v-model="formated.isvalid" disabled></el-switch>
                        </el-form-item>
                        <el-form-item label="余额">
                            <el-input v-model="formated.balance" disabled></el-input>
                        </el-form-item>

                        <!-- 退出按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="()=>{this.$router.push('/shopping');} ">退出</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {

            user: JSON.parse(sessionStorage.getItem("user")),
            formated:{
                id:null,
                email:null,
                password:null,
                name:null,
                age:null,
                sex:'U',
                isvalid:null,
                balance:null
            }
        };
    },

    mounted() {
        this.formated.id=this.user.id;
        this.formated.email=this.user.email;
        this.formated.name=this.user.name;
        this.formated.age=this.user.age;
        if(this.user.sex==="F")
            this.formated.sex="女"
        else if(this.user.sex==="M")
            this.formated.sex="男"
        else
            this.formated.sex="未知"
        this.formated.isvalid=this.user.isvalid;
        this.formated.balance=Number(this.user.balance).toFixed(4);
    }
};
</script>

<style scoped>
.profile-container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.profile-card {
    width: 80%;
}

.card-title {
    font-size: 30px;
    font-weight: bold;
}
</style>